<template>
  <div class="h5-video-box">
    <div
      class="cover"
      v-if="info.cover && !playing"
      @click="videoClick"
      :style="{ backgroundImage: `url(${data.cover || info.cover})` }"
    >
      <div class="play-btn"></div>
      <div class="gradient">
        <div class="durationStr num-font">{{ info.durationStr }}</div>
      </div>
    </div>
    <mutong-player
      :player="player"
      style="z-index:3"
      ref="player"
      v-if="player.playauth && isPC"
      @ready="ready"
    ></mutong-player>
    <video
      object-fit="cover"
      controls="true"
      webkit-playsinline="true"
      x5-video-player-type="h5"
      playsinline="true"
      preload="metadata"
      controlslist="nodownload nofullscreen noremoteplayback"
      :src="info.url"
      :poster="info.cover"
      autoplay
      ref="video"
      v-if="!isPC && playing"
    ></video>
  </div>
</template>

<script>
  import MutongPlayer from 'mutong-ketang-player';

  export default {
    props: {
      vid: {
        type: String,
      },
      data: {
        type: Object,
      },
    },
    components: {
      MutongPlayer,
    },
    data() {
      return {
        info: {},
        player: {
          vid: this.vid,
          playauth: '',
          width: '100%',
          height: '100%',
          isJimu: true,
        },
        playing: false,
        isPC: false,
      };
    },
    mounted() {
      this.isPC = window.$isPC;
      if (this.vid) {
        this.getVideoInfo();
        this.getVideoUrl();
      }
    },
    methods: {
      getAuth() {
        this.$service
          .VodPlayAuth({ videoId: this.vid })
          .then((res) => {
            this.$set(this.player, 'playauth', res);
          })
          .catch((err) => {});
      },
      getVideoInfo() {
        this.$service
          .VodVideoInfo({
            videoId: this.vid,
          })
          .then((res) => {
            this.info = res;
          })
          .catch((err) => {});
      },
      getVideoUrl() {
        this.$service
          .VodPlayInfo({
            videoId: this.vid,
          })
          .then((res) => {
            this.$set(this.info, 'url', res.streams[0].playUrl);
          })
          .catch((err) => {
            console.log(err);
          });
      },
      videoClick() {
        if (window.$isPC) {
          this.getAuth();
        } else {
          this.playing = true;
          setTimeout(() => {
            const video = this.$refs.video;
            // const video = document.querySelector(`video`);
            video.play();
          }, 100);
        }
      },
      ready() {
        console.log('ready go 🏍');
        this.playVideo();
      },
      playVideo() {
        this.$refs.player && this.$refs.player.play();
      },
    },
  };
</script>

<style lang="less" scoped>
  .h5-video-box {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    position: relative;
    // margin: 1.5rem auto;
    overflow: hidden;

    .cover {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 0;

      .gradient {
        width: 100%;
        height: 3.1rem;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        position: absolute;
        bottom: -1px;
        left: 0;
        z-index: 1;

        .durationStr {
          border-radius: 1rem;
          position: absolute;
          right: 0.7rem;
          bottom: 0.7rem;
          font-size: 1.2rem;
          color: rgba(#ffffff, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5);
          padding: 0rem 1rem;
          height: 2rem;
        }
      }

      .play-btn {
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        backdrop-filter: blur(0.2rem);
        overflow: hidden;
        background: url(../assets/images/icon-play-btn.png) center center no-repeat;
        background-color: rgba(#cccccc, 1);
        background-size: 45%;
        cursor: pointer;
        user-select: none;
        background-position: 1.5rem center;
      }

      img {
        position: absolute;
        z-index: -1;
      }
    }

    img,
    video {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    video {
      background: #000000;
    }
    video.hide {
      opacity: 0;
    }
  }
</style>
